<template>
  <div class="detail-container-wrap">
    <div class="detail-title">
      <h1>
        {{this.$store.state.content_detail.currentContent.title}}
      </h1>
    </div>
    <div class="detail-user-info">
      <img class="detail-author-photo" src="/default-photo.jpg"/>
      <span>
        <div class="detail-author-name">
          {{this.$store.state.content_detail.currentContent.uAuthor !== null && this.$store.state.content_detail.currentContent.uAuthor !== undefined ? this.$store.state.content_detail.currentContent.uAuthor.nickname : ''}}
          </div>
        <div class="detail-acticle-time">
           {{this.$store.state.content_detail.currentContent.publishTime}}
          </div>
      </span>
      <span class="detail-chat-oper fr">
            <span><img src="/icons/detail-zan.png"/></span>
            <span><img src="/icons/detail-adds.png"/></span>
      </span>
      <span class="cf"></span>
    </div>
    <div class="detail-content">
      {{this.$store.state.content_detail.currentContent.content}}
    </div>
    <div class="detail-chat">
      <div class="detail-chat-title">
        回答 {{this.$store.state.content_detail.currentContent.replyCount}}
      </div>

      <div class="bdsharebuttonbox" data="{'comment':'目前支持自定义qq空间，开心网和人人网的评论内容'}">
        <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信">微信</a>
        <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友">QQ好友</a>
        <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间">QQ空间</a>
        <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博">新浪微博</a>
        <a href="#" class="bds_more" data-cmd="more">更多</a>
      </div>

      <div class="detail-chat-list">
        <div class="detail-write-chat">
          <div class="detail-mini-write-chat" @click="inputClick">
            <div class="detail-chat-input"></div>
            <div class="detail-save-chat">回答</div>
          </div>
        </div>

        <div v-for="item in this.$store.state.content_detail.contentReplyData">
          <div class="detail-user-info">
            <img class="detail-author-photo" src="/default-photo.jpg"/>
            <span>
            <div
              class="detail-author-name">{{item.uAuthor !== null && item.uAuthor !== undefined ? item.uAuthor.nickname : ''}}</div>
            <div class="detail-acticle-time">{{item.createTime}}</div>
          </span>
            <span class="detail-chat-oper fr">
            <span><img src="/icons/detail-zan.png"/></span>
            <span><img src="/icons/detail-adds.png" @click="toComment(item)" title="回复"/></span>
          </span>
            <span class="cf"></span>
            <div class="detail-chat-content">
              <div class="content-reply">{{item.content}}</div>
              <div class="content-reply-commit">
                <div v-for="rc in item.replyComments">
                  <div v-if="currentReplyComment !==[] && it.replyId === rc.replyId" v-for="it in currentReplyComment">
                    <span class="content-reply-commit-author">{{it.uAuthor.nickname}}</span>&nbsp;:&nbsp;{{it.content}}
                  </div>
                  <div>
                    <span class="content-reply-commit-author">{{rc.uAuthor.nickname}}</span>&nbsp;:&nbsp;{{rc.content}}
                  </div>
                </div>
                <div
                  v-if="currentReplyComment !==[] && it.replyId === item.id && (item.replyComments ===null || item.replyComments ===undefined || item.replyComments.length ===0) "
                  v-for="it in currentReplyComment">
                  <span class="content-reply-commit-author">{{it.uAuthor.nickname}}</span>&nbsp;:&nbsp;{{it.content}}
                </div>
                <div class="content-reply-commit-more"
                     v-if="(currentReplyComment !== [] && currentReplyComment !== null && currentReplyComment !== undefined && currentReplyComment !== 'undefined' && currentReplyComment.length > 0 && currentReplyComment[0].replyId === item.id) || (item.replyComments !==[] && item.replyComments !==null && item.replyComments !==undefined && item.replyComments.length !==0) ">
                  <span @click="toMoreCommentModal">更多评论</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="detail-loading-wrap">
          <div v-if="this.$store.state.content_detail.contentLoading === '1'"
               @click="loadMore" class="my-loading">
            加载更多
          </div>
          <div v-if="this.$store.state.content_detail.contentLoading === '2'"
               class="my-loading">
            正在加载 ......
          </div>
          <div v-if="this.$store.state.content_detail.contentLoading === '3'" class="no-more">
            没有更多了
          </div>
          <div v-if="this.$store.state.content_detail.contentLoading === '4'" class="no-more">
          <span v-if="this.$store.state.content_detail.currentContent.type === 1">
            暂无回答
          </span>
            <span v-if="this.$store.state.content_detail.currentContent.type === 2">
            暂无评论
          </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Cookie from 'js-cookie'
  export default {
    layout: 'detail',
    data () {
      return {}
    },
    mounted () {
      this.initShare()
      // 首次加载页面数据
      let _contentId = this.$route.params.id
      if (_contentId != null && _contentId !== undefined) {
        this.$store.dispatch('content_detail/setCurrentContent', {
          contentId: _contentId
        })
        this.$store.dispatch('content_detail/getContentReplyData', {
          contentId: _contentId, oper: 'init'
        })
      }
    },
    head () {
      return {
        title: this.$store.state.content_detail.currentContent.title
      }
    },
    beforeCreate: function () {
    },
    computed: {
      currentReply: {
        get () {
          return this.$store.state.content_detail.currentReply
        }
      },
      currentReplyComment: {
        get () {
          return this.$store.state.content_detail.commentUserData
        }
      }
    },
    methods: {
      initShare () {
        let url = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)
        let script = document.createElement('script')
        script.setAttribute('src', url)
        document.getElementsByTagName('head')[0].appendChild(script)

        window._bd_share_config = {
          'common': {
            'bdSnsKey': {},
            'bdText': '',
            'bdMini': '2',
            'bdMiniList': false,
            'bdPic': '',
            'bdStyle': '1',
            'bdSize': '16'
          },
          'share': {'bdSize': 16},
          'image': {'viewList': ['weixin', 'sqq', 'qzone', 'tsina'], 'viewText': '更多', 'viewSize': '24'},
          'selectShare': {'bdContainerClass': null, 'bdSelectMiniList': ['weixin', 'sqq', 'qzone', 'tsina']}
        }
      },
      toMoreCommentModal () {
        this.$store.dispatch('content_detail/setMoreCommentModal', {
          moreCommentModal: true
        })
      },
      inputClick () {
        this.$store.dispatch('content_detail/setReplyModal', {
          replyModal: true
        })
      },
      toComment (reply) {
        this.$store.dispatch('content_detail/setCommentModal', {
          commentModal: true
        })
        this.$store.dispatch('content_detail/setCurrentReply', {
          currentReply: reply
        })
      },
      loadMore () {
        this.$store.dispatch('content_detail/getContentReplyData', {
          contentId: this.$route.params.id, oper: 'more'
        })
      }
    }
  }
</script>
<style>
  .detail-loading-wrap {
    margin-bottom: 60px;
  }

  .content-reply-commit {
    border-radius: 4px;
    margin: 10px auto;
    font-size: 0.8em;
    background-color: #f3f3f3;
  }

  .content-reply-commit-author {
    color: #13BA31;
  }

  .detail-content {
    word-wrap: break-word;
    font-size: 1.4em;
    text-indent: 2.7em;
    letter-spacing: 0.1em;
  }

  .detail-title {
    text-indent: 0;
    margin: -5px auto 15px auto;
  }

  .detail-title h1 {
    display: inline-block;
    font-size: 1.8em;
    color: #4d4d4d;
  }

  .detail-user-info .detail-author-photo {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    margin-right: 10px;
  }

  .detail-user-info .detail-author-name {
    color: #13BA31;
    font-weight: 700;
  }

  .detail-user-info {
    margin-bottom: 10px;
    font-size: 1.25em;
  }

  .detail-chat-title {
    margin: 15px auto;
    font-weight: 700;
    color: #13BA31;
    font-size: 1.6em;
    border-left: 5px solid #13BA31;
    padding: 5px;
  }

  .detail-chat-list {
    border-top: 1px solid #ececec;
    padding-top: 10px;
  }

  .detail-chat-list .detail-user-info {
    border-bottom: 1px solid #ececec;
  }

  .detail-chat-content {
    padding-left: 40px;
    font-size: 1.4em;
    letter-spacing: 0.1em;
    margin: 8px auto;
  }

  .detail-chat-oper img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
  }

  .detail-write-chat {
    display: block;
  }

  @media all and (max-width: 766px) {
    .detail-write-chat {
      display: none;
    }
  }

  .detail-mini-write-chat {
    margin: 5px auto 20px auto;
    border: 1px solid #ececec;
  }

  .detail-mini-write-chat .detail-chat-input {
    width: 80%;
    background-color: #f1f1f1;
  }

  .detail-mini-write-chat > div {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.3em;
    height: 50px;
    line-height: 50px;
  }

  .detail-mini-write-chat .detail-save-chat {
    width: 20%;
    background-color: #13BA31;
    text-align: center;
    color: #ffffff;
    font-weight: 600;
    font-size: 1.6em;
  }


</style>
